<%- include('./layout/header.ejs') %>


  <!-- <div class="container"> -->
      <h1>文章列表</h1>

      <div class="list-group" style="margin: 10px;">
    
        <% articles.forEach(items => { %>
          <a href="/article/info/<%=items.id %>" class="list-group-item">
            <%=items.title %>
            <span class="badge" style="background-color: #5bc0de;">发表时间：<%=items.ctime %></span>
            <span class="badge" style="background-color: #f0ad4e;">作者昵称：<%=items.nickname %></span>
          </a>
        <% }) %>
        
          <!-- <a href="/article/info/7" class="list-group-item">
            test123456
            <span class="badge" style="background-color: #5bc0de;">发表时间：2018-07-17 15:14:45</span>
            <span class="badge" style="background-color: #f0ad4e;">作者昵称：泥巴巴</span>
          </a>
          
          <a href="/article/info/6" class="list-group-item">
            Node.js - day6（黑马博客案例）
            <span class="badge" style="background-color: #5bc0de;">发表时间：2018-07-17 15:13:30</span>
            <span class="badge" style="background-color: #f0ad4e;">作者昵称：泥巴巴</span>
          </a>
          
          <a href="/article/info/5" class="list-group-item">
            444
            <span class="badge" style="background-color: #5bc0de;">发表时间：2018-07-17 14:59:22</span>
            <span class="badge" style="background-color: #f0ad4e;">作者昵称：泥巴巴</span>
          </a> -->
          
      </div>
    
      <!-- 分页区域 -->
      <nav aria-label="Page navigation">
          <ul class="pagination">
            <li>   
              <a href="?page=<%=nowPage <= 1 ? 1: (nowPage - 1) %>" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
    
            <% for(let i = 1; i <= totalPage; i++) { %>
              <li class="<%= nowPage == i ? 'active':'' %>"><a href="?page=<%=i%>"><%=i%></a></li>
            <% } %>
            
            <!-- <li class="active"><a href="?page=1">1</a></li>
            
            <li class=""><a href="?page=2">2</a></li>
            
            <li class=""><a href="?page=3">3</a></li> -->
            
            <li>
              <a href="?page=<%=nowPage >= totalPage ? totalPage : (nowPage + 1) %>" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
    
  <!-- </div> -->


  <%- include('./layout/footer.ejs') %>